<template>
    <div class="wrap">
        <!-- 顶部结构 -->
        <div class="top">
            <div class="hosname">{{ workData.baseMap?.hosname }}</div>
            <div class="line"></div>
            <div>{{workData.baseMap?.bigname}}</div>
            <div class="dot">.</div>
            <div class="hosdeparment">{{ workData.baseMap?.depname }}</div>
        </div>
        <!-- 中间展示日期的结构 -->
        <div class="center">
            <h1 class="time">{{workData.baseMap?.workDateString}}</h1>
            <div class="container">
                <div class="item" :class="{active:item.status==-1||item.availableNumber==-1,cur:item.workDate==workTime.workDate}" v-for="item in workData.bookingScheduleList" :key="item" @click="getTime(item)">
                    <div class="top1">{{item.workDate}}-{{ item.dayOfWeek }}</div>
                    <div class="bottom">
                        <div v-if="item.status==-1">停止挂号</div>
                        <div v-if="item.status==0">
                            {{ item.availableNumber==-1?'约满了':`有号(${item.availableNumber})` }}
                        </div>
                        <div v-if="item.status==1">
                            即将放号
                        </div>
                    </div>
                </div>
            </div>
            <el-pagination v-model:current-page="pageNo" layout="prev, pager, next" :total="workData.total" @current-change="fetchWorkData"/>
        </div>
        <!-- 底部展示医生的结构 -->
        <div class="bottom">
            <!-- 展示即将放号的时间 -->
            <div class="will" v-if="workTime.status==1">
                <span>2023年6月3日08:30:00</span>
                <span>放号</span>
            </div>
            <!-- 展示医生的结构 -->
            <div class="doctor" v-else>
                <div class="morning">
                    <!-- 顶部文字提示 -->
                    <div class="tip">
                        <svg t="1698575110154" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4160" width="32" height="32"><path d="M815.466017 515.264038c0-164.007518-133.429141-297.439855-297.439855-297.439855-164.007518 0-297.436658 133.432337-297.436658 297.439855s133.429141 297.439855 297.436658 297.439855c164.010715 0 297.439855-133.432337 297.439855-297.439855z m-550.119871 0c0-139.330623 113.35259-252.683213 252.680016-252.683213 139.330623 0 252.683213 113.35259 252.683213 252.683213s-113.35259 252.683213-252.683213 252.683213c-139.327427 0-252.680016-113.35259-252.680016-252.683213zM209.89906 513.659193a22.378321 22.378321 0 0 0-22.378321-22.378321H64.804421a22.378321 22.378321 0 1 0 0 44.756642h122.719515a22.378321 22.378321 0 0 0 22.375124-22.378321zM963.770347 491.280872h-122.716318a22.378321 22.378321 0 1 0 0 44.756642h122.716318a22.378321 22.378321 0 1 0 0-44.756642zM514.285786 818.045918a22.378321 22.378321 0 0 0-22.378321 22.378321v122.716319a22.378321 22.378321 0 1 0 44.756642 0v-122.716319a22.378321 22.378321 0 0 0-22.378321-22.378321zM514.285786 209.26927a22.378321 22.378321 0 0 0 22.378321-22.378321V64.174631a22.378321 22.378321 0 1 0-44.756642 0V186.890949a22.378321 22.378321 0 0 0 22.378321 22.378321zM267.404951 728.893884l-86.776735 86.776735a22.378321 22.378321 0 0 0 31.64934 31.646143l86.776735-86.776735a22.378321 22.378321 0 0 0-31.64934-31.646143z" fill="#009FE8" p-id="4161"></path><path d="M745.345147 304.978152a22.311186 22.311186 0 0 0 15.821473-6.553651l86.776735-86.773538a22.378321 22.378321 0 1 0-31.642946-31.646143l-86.776735 86.773538a22.378321 22.378321 0 0 0 15.821473 38.199794zM761.169817 728.893884a22.378321 22.378321 0 0 0-31.64934 31.646143l86.776735 86.776735c4.370166 4.370166 10.099017 6.553651 15.82467 6.553651s11.454503-2.186682 15.82467-6.553651a22.378321 22.378321 0 0 0 0-31.646143L761.169817 728.893884zM267.408148 298.424501c4.366969 4.370166 10.09582 6.553651 15.821473 6.553651s11.454503-2.186682 15.82467-6.553651a22.378321 22.378321 0 0 0-0.003197-31.646143L212.274359 180.001623a22.378321 22.378321 0 0 0-31.642946 31.646143l86.776735 86.776735zM540.404483 316.579713a22.378321 22.378321 0 0 0-22.378321-22.378321c-121.894714 0-221.059449 99.167931-221.059449 221.059449a22.378321 22.378321 0 1 0 44.756642 0c0-97.214623 79.088183-176.302807 176.302807-176.302807a22.378321 22.378321 0 0 0 22.378321-22.378321z" fill="#009FE8" p-id="4162"></path></svg>
                        <span class="text">上午号源</span>
                    </div>
                    <!-- 每一个医生的信息 -->
                    <div class="doc_info" v-for="item in morningArr" :key="item.id">
                        <!-- 展示名字 -->
                        <div class="left">
                            <div class="info">
                                <span>{{ item.title }}</span>
                                <span> | </span>
                                <span>{{ item.docname }}&nbsp;</span>
                            </div>
                            <div class="skill">{{ item.skill }}</div>
                        </div>
                        <!-- 展示钱数 -->
                        <div class="right">
                            <span>￥{{ item.amount }}</span>
                            <el-button type="primary" @click="goStep2(item)">剩余{{ item.availableNumber }}</el-button>
                        </div>
                    </div>
                </div>
                <div class="afternoon">
                    <div class="tip">
                        <svg t="1698576197974" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8853" width="32" height="32"><path d="M219.005 365.192h473.799v48H219.005z" fill="#B8CCD7" p-id="8854"></path><path d="M428.666 567.874h64v326.881h-64zM628.666 959.046h-336c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32h336c17.673 0 32 14.327 32 32 0 17.673-14.326 32-32 32z" fill="#54626C" p-id="8855"></path><path d="M460.666 662.367L130.627 332.329c-18.369-18.37-23.814-45.747-13.873-69.747s33.15-39.507 59.127-39.507H745.45c25.978 0 49.187 15.508 59.128 39.508s4.495 51.377-13.874 69.747L460.666 662.367zM175.882 287.074l284.784 284.783 284.783-284.784-569.567 0.001z m-0.303 0.02c-0.001 0-0.001 0 0 0-0.001 0-0.001 0 0 0z m0.102-0.249c0.001 0 0 0 0 0z m569.97 0z" fill="#54626C" p-id="8856"></path><path d="M730.379 470.437c-23.28 0-45.996-4.259-67.518-12.659l17.453-44.715c15.936 6.22 32.78 9.374 50.064 9.374 75.954 0 137.747-61.792 137.747-137.746 0-75.954-61.793-137.747-137.747-137.747s-137.747 61.793-137.747 137.747h-48c0-102.421 83.326-185.747 185.747-185.747s185.747 83.326 185.747 185.747c0.001 102.421-83.325 185.746-185.746 185.746z" fill="#54626C" p-id="8857"></path></svg>
                        <span>下午号源</span>
                    </div>
                    <div class="doc_info" v-for="item in afternoonArr" :key="item.id">
                        <!-- 展示名字 -->
                        <div class="left">
                            <div class="info">
                                <span>{{ item.title }}</span>
                                <span> | </span>
                                <span>{{ item.docname }}&nbsp;</span>
                            </div>
                            <div class="skill">{{ item.skill }}</div>
                        </div>
                        <!-- 展示钱数 -->
                        <div class="right">
                            <span>￥{{ item.amount }}</span>
                            <el-button type="primary" @click="goStep2(item)">剩余{{ item.availableNumber }}</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {onMounted,ref,computed} from 'vue';
import { reqHospitalWork,reqHospitalDoctor } from '@/api/hospital';
import { useRoute,useRouter } from 'vue-router';
import { HospitalDoctor,HospitalWorkResponseData,HospitalDoctorArr,HospitalDoctorRes } from '@/api/hospital/type';
// 获取路由对象
let $route=useRoute();
// 获取路由器对象
let $router = useRouter();
// 分页器当前页码
let pageNo=ref<number>(1);
// 每一页展示几条数据
let limit=ref<number>(6);
// 存储医院科室挂号的数据
let workData = ref<any>({});
// 存储排班日期：当前科室第一个日期信息
let workTime = ref<any>({});
// 存储排班医生的数据
let doctor = ref<HospitalDoctorArr>([]);
// 组件挂载完毕，发起请求
onMounted(()=>{
    fetchWorkData();
})
// 获取挂号的数据
const fetchWorkData =async ()=>{
    let result:HospitalWorkResponseData=await reqHospitalWork(pageNo.value,limit.value,$route.query.hoscode as string,$route.query.depcode as string);
    if(result.status==200){
        workData.value=result.data.data;
        // 存储第一天的数据
        workTime.value=workData.value.bookingScheduleList[0];
        doctorInfo();
    }
}

// 获取某一天医生的排班数据
const doctorInfo=async ()=>{
    // 医院编号
    let hoscode =$route.query.hoscode;
    // 获取科室编号
    let depcode = $route.query.depcode;
    // 获取时间
    let time = workTime.value?.workDate;
    let result:HospitalDoctorRes=await reqHospitalDoctor(hoscode as string,depcode as string,time);
    // console.log(result);
    if(result.status==200){
        doctor.value=result.data.data;
    }
}

// 点击顶部某一天时候触发回调
const getTime=(item:any)=>{
    // 改变日期信息
    workTime.value=item;  
    // 再次获取某一天医生的排班数据
    doctorInfo()
}

// 根据计算属性，计算出上午和下午医生的数据
let morningArr=computed(()=>{
    // 过滤筛选
    return doctor.value.filter((doc:HospitalDoctor)=>{
        return doc.workTime=='0';
    })
})
let afternoonArr=computed(()=>{
    return doctor.value.filter((doc:HospitalDoctor)=>{
        return doc.workTime=='1';
    })
})

// 点击票数进行跳转
const goStep2=(doctor:HospitalDoctor)=>{
    // 编程式导航进行路由跳转
    $router.push({path:'/hospital/register_step2',query:{docId:doctor.id}})
}
</script>

<style scoped lang="scss">
.wrap {
    .top {
        display: flex;
        color: #7f7f7f;
        .line{
            width: 5px;
            height: 20px;
            background-color: skyblue;
            margin: 0px 5px;
        }
        .dot{
            margin: 0px 5px;
            color: skyblue;
        }
    }
    .center{
        margin: 20px 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .time{
            font-weight: 900;
        }
        .container{
            display: flex;
            width: 100%;
            margin: 30px 0px;
            .item{
                flex: 1;
                width: 100%;
                border: 1px solid skyblue;
                margin: 0px 10px;
                transition: all 0.5s;
                &.active{
                    border: 1px solid #ccc;
                    color: #7f7f7f;
                    .top1{
                        background: #ccc;
                    }
                }
                &.cur{
                    transform: scale(1.1);
                }
                .top1{
                    width: 100%;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    background-color: skyblue;
                }
                .bottom{
                    width: 100%;
                    height: 60px;
                    text-align: center;
                    line-height: 60px;
                }
            }
        }
    }
    .bottom{
        .will{
            text-align: center;
            font-size: 30px;
            font-weight: 900;
        }
        .doctor{
            .morning,.afternoon{
                .tip{
                    display: flex;
                    align-items: center;
                    .text{
                        color: #7f7f7f;
                        font-weight: 900;
                    }
                }
                .doc_info{
                    display: flex;
                    justify-content: space-between;
                    margin: 10px 0px;
                    padding: 5px;
                    border-bottom: 2px solid #ccc;
                    .left{
                        display: flex;
                        align-items: center;
                    }
                    .right{
                        width: 150px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                }
            }
        }
    }
}
</style>